<template>
  <div class="dialog">
    <div class="header">
      知识库管理
      <span class="x" @click="emit('close')">X</span>
    </div>
    <div class="content">
      <div v-if="!showKnowledgeBase" class="knowledge-bases">
        <div class="option-bar">
          <div class="tool" v-for="tool in tools" :key="tool.icon">
            <el-tooltip :content="tool.name" placement="right">
              <div @click="click(tool.name)" :class="`iconfont ${tool.icon}`" :style="`${'size' in tool?'font-size:' + tool.size + 'px;':''}`"/>
            </el-tooltip>
          </div>
        </div>
        <div class="knowledge-base-list">
          <div v-for="(knowledgeBase,index) in props.knowledgeBases" :key="knowledgeBase" class="table-row">
            <div class="knowledge-base-name">
              <i class="iconfont icon-ic_wenjianjia"/>
              <div @click="enterKnowledgeBase(knowledgeBase)">
                {{ knowledgeBase }}
              </div>
            </div>
            <div class="more-option">
              <el-dropdown trigger="click" ref="dropdownRefs">
                <i class="iconfont icon-gengduo"/>
                <template #dropdown>
                  <div class="dropdown">
                    <div v-for="menu in dropdownMenus" :key="menu.id" @click="menu.callback(knowledgeBase, dropdownRefs[index])" :class="`row ${menu.id}`">
                      <i :class="`iconfont ${menu.icon}`"/>
                      <div class="text">
                        {{ menu.name }}
                      </div>
                    </div>
                  </div>
                </template>
              </el-dropdown>
            </div>
          </div>
        </div>
      </div>
      <knowledge-base v-else :knowledgeBase="showKnowledgeBase" @return="showKnowledgeBase = ''"/>
    </div>
  </div>
  <el-dialog v-model="centerDialogVisible" width="50%" center style="border-radius: 12px;">
    <div class="new-dialog">
      <div class="header">
        新建知识库
        <span class="x" @click="centerDialogVisible = false;">X</span>
      </div>
      <div class="content">
        <el-form
            ref="submitForm"
            :model="newName"
            label-width="0px"
            style="padding: 20px;"
        >
          <el-form-item prop="nameInput" :rules="[{validator: validateName,trigger: 'blur'}]">
            <el-input v-model="newName.nameInput" placeholder="请输入知识库名"/>
          </el-form-item>
        </el-form>
        <div class="buttons">
          <div class="confirm button" @click="newConfirm(submitForm)">
            确定
          </div>
          <div class="cancel button" @click="centerDialogVisible = false;">
            取消
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {post} from '../utils/request.js'
import KnowledgeBase from './KnowledgeBase.vue'

const emit = defineEmits(['close', 'deleteKnowledgeBases', 'createKnowledgeBases'])
const props = defineProps(['knowledgeBases'])
const showKnowledgeBase = ref('')
const enterKnowledgeBase = (knowledgeBase) => {
  showKnowledgeBase.value = knowledgeBase
}

const dropdownRefs = ref(null)
const deleteKnowledgeBase = (knowledgeBase, dropRef) => {
  post('api/delete_knowledge_base',{
    knowledge_base: knowledgeBase
  }).then(res=>{
    if(res.data.message === 'success'){
      emit('deleteKnowledgeBases', knowledgeBase)
      ElMessage({
        message: '删除成功！',
        type: 'success',
      })
    }
  })
  dropRef.handleClose()
}
const dropdownMenus = ref([
  {
    id: 'delete',
    name: '删除',
    icon: 'icon-shanchu',
    callback: deleteKnowledgeBase
  }
])
const tools = ref([
  {
    name: '新建知识库',
    icon: 'icon-zengjia'
  },
])
const centerDialogVisible = ref(false)
const newName = reactive({
  nameInput: ''
})
const submitForm = ref(null)
const validateName = (rule, value, callback)=>{
  // 集合名称长度应为3到63个字符之间。
  if (value.length < 3 || value.length > 63) {
    return callback(new Error('名称长度应为3到63个字符之间'))
  }
  // 集合名称必须以字母数字字符开头和结尾。
  if (!/^[a-zA-Z0-9].*[a-zA-Z0-9]$/.test(value)) {
    return callback(new Error('名称必须以字母数字字符开头和结尾'))
  }
  // 集合名称只能包含字母数字字符、下划线或连字符(-)。
  if (!/^[a-zA-Z0-9_-]+$/.test(value)) {
    return callback(new Error('名称只能包含字母数字字符、下划线或连字符(-)'))
  }
  // 集合名称中不能包含两个连续的句点 (..)。
  if (value.indexOf('..') !== -1) {
    return callback(new Error('集合名称中不能包含两个连续的句点 (..)'))
  }
  return true
}
const newConfirm = (form)=> {
  form.validate((valid) => {
    console.log(valid)
    if (valid) {
      post('api/create_knowledge_base',{
        knowledge_base: newName.nameInput
      }).then(res => {
        if(res.data.message === 'success'){
          ElMessage({
            message: '新建成功！',
            type: 'success',
          })
          emit('createKnowledgeBases', newName.nameInput)
          centerDialogVisible.value = false
        }
      })
    } else {
      return false
    }
  })
}
const click = (name) => {
  switch (name){
    case '新建知识库':
      newName.nameInput = ''
      centerDialogVisible.value = true
      break
  }
}
</script>

<style lang="scss" scoped>
.dialog {
  height: 50vh;
  display: flex;
  flex-direction: column;
  position: relative;
  .header {
    color: black;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-weight: 900;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #dedede;
    .x {
      position: absolute;
      right: 0;
      margin-right: 15px;
      font-weight: normal;
      cursor: pointer;
    }
  }
  .content {
    display: flex;
    flex-grow: 1;
    .knowledge-bases{
      display: flex;
      flex-grow: 1;
      .option-bar {
        border-right: 1px solid #e8e8e8;
        width: 40px;
        display: flex;
        flex-direction: column;
        .tool {
          display: flex;
          align-content: center;
          justify-content: center;
          height: 50px;
          .iconfont {
            display: flex;
            align-items: center;
            font-size: 24px;
            cursor: pointer;
          }
        }
      }
      .knowledge-base-list{
        flex-grow: 1;
        .table-row{
          display: flex;
          justify-content: space-between;
          position: relative;
          font-size: 1.3em;
          align-items: center;
          color: black;
          transition: 0.2s linear;
          &:hover{
            background: #f6f6f6;
          }
          .knowledge-base-name{
            cursor: pointer;
            display: flex;
            align-items: center;
            .iconfont{
              font-size: 1em;
              margin: 0 0.5em;
            }
          }
          .more-option{
            margin-right: 0.5em;
            cursor: pointer;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
}
.new-dialog{
  .header{
    color: black;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    font-weight: 900;
    position: relative;
    box-sizing: border-box;
    border-bottom: 1px solid #dedede;
    .x{
      position: absolute;
      right: 0;
      margin-right: 15px;
      font-weight: normal;
      cursor: pointer;
    }
  }
  .content {
    .buttons {
      display: flex;
      justify-content: space-between;
      padding: 0 20px 20px;

      .button {
        padding: 3px 15px;
        border: 1px solid #dcdfe6;
        border-radius: 5px;
        cursor: pointer;
      }

      .confirm {
        background: #409eff;
        color: white;
        border-color: #409eff;
      }
    }
  }
}
.dropdown{
  padding: 8px;
  .row{
    display: flex;
    padding: 5px;
    cursor: pointer;
    transition: 0.2s linear;
    border-radius: 3px;
    &:hover{
      background: #f6f6f6;
    }
    &.delete{
      .iconfont{
        color: #f55255;
      }
      color: #f55255;
    }
    .iconfont{
      color: #454545;
      margin-right: 0.5em;
    }
  }
}
</style>
